<template>
  <div>
    <!-- <div>{{$store.state.模块名.字段名}}</div> -->
    <!-- 
      <div>token: {{$store.state.user.token}}</div>
      <div>appName:{{$store.state.setting.name}}</div> 
    -->
    <div>token: {{token}}</div>
    <div>appName:{{name}}</div>
    <button @click="removeData">清空数据(setting)</button>
    <button @click="userRemoveData">清空数据(user)</button>
  </div>
</template>

<script>
// 不引入全局的 mapMutations 反而引入一个生产辅助函数的方法
import {mapGetters, mapMutations, createNamespacedHelpers} from 'vuex'
// console.log('基于命名空间的辅助函数', createNamespacedHelpers('user'));
// 利用这个方法生成基于user模块的辅助函数, 取出其中的 mapMutations
const { mapMutations: userMapMutations } = createNamespacedHelpers('user')
export default {
  computed: {
    ...mapGetters(['token','name'])
  },
  methods: {
    // 直接用, 由于已经是基于user模块, 不需要有什么模块路径了
    ...mapMutations('setting', ['removeData']),
    ...userMapMutations({
      userRemoveData: 'removeData'
    })
  }
}
</script>

<style>

</style>